What are the four main components of a transition?
The Four Components of the CSS Transition Property
In CSS, a transition defines how a property changes smoothly from one state to another over a specific period. The transition shorthand property consists of four main components that control how these animations behave.
- 1
transition-property— Specifies which CSS property should transition (e.g., transform, opacity, background-color). - 2
transition-duration— Defines how long the transition takes to complete (e.g., 0.5s, 2s). - 3
transition-timing-function— Controls the acceleration curve of the transition (e.g., ease, linear, ease-in-out). - 4
transition-delay— Determines how long to wait before starting the transition (e.g., 0s, 1s).
In this example, the box smoothly scales and rotates when hovered. The transition starts after a 0.2-second delay, lasts 0.5 seconds, and uses the ease-in-out timing function for natural motion.
- 1
All four components can be written in one shorthand declaration or separately.
- 2
If no
transition-propertyis defined,allis used by default. - 3
Transitions work best with animatable properties like
transform,opacity, andcolor.